<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script src="layui/layui.all.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <link rel="stylesheet" href="layui/css/layui.mobile.css"/>
    <script src="js/jquery3.3.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            //实现全选反选
            $("#all").on('click', function() {
                $("tbody input:checkbox").prop("checked", $(this).prop('checked'));
            })
            $("tbody input:checkbox").on('click', function() {
                //当选中的长度等于checkbox的长度的时候,就让控制全选反选的checkbox设置为选中,否则就为未选中
                if($("tbody input:checkbox").length === $("tbody input:checked").length) {
                    $("#all").prop("checked", true);
                } else {
                    $("#all").prop("checked", false);
                }
            })
        });

        //删除所选的记录
        function delAll(){
            var userInfoList=new Array();
            $('input[name="ipInfo"]:checked').each(function(){
                userInfoList.push($(this).val());//向数组中添加元素
            });
            $.post("/delallip",{"listid":userInfoList},function(data){
                if (data=="0"){
                    $('input[name="ipInfo"]:checked').parent().parent().remove();
                    window.location.href="/ipmsg";
                } else {
                    alert("删除失败！！");
                }
            })
        }
        //删除某一个
        function delOne(obj,id) {
            var truthBeTold = window.confirm("是否确认删除？");
            if (truthBeTold) {
                var url = "/deloneip";
                $.post(url, {"id":id}, function(data){
                    if (data == "0"){
                        $(obj).parent().parent().remove();
                        window.alert("删除成功！");
                        window.location.href="/ipmsg";
                    }else {
                        window.alert("删除失败！")
                    }
                })
            } else window.alert("您取消了删除！");
        }
        //修改弹出层
        function showedit(id) {
            //异步查询出数据,当ajax请求的网址响应返回后，会自动回调匿名函数
            $.post("/showip",{"id":id},function (data) {
                $("#select2").val(data.status);
                $("#ipid").val(data.id);
                $("#deadtime1").val(data.deadtime);
                $("#ip1").val(data.ip);
                $("#remarks1").val(data.remarks)

            });
            //负责显示窗口
            renderForm();
            renderDate();
            var	layer = layui.layer;
            var othis = $(this);
            var type = othis.data('type')
            var text = othis.text();
            layer.open({
                type: 1
                ,skin:'layui-layer-molv'
                ,offset:type
                ,id: 'layerDemo'+type //防止重复弹出
                ,content: $("#form2")
                ,btnAlign: 'c' //按钮居中
                ,shade: 0.5 //不显示遮罩
                ,title:"编辑ip"
                ,area:['450px','430px']
                ,yes: function(index, layero){
                    layer.close(index);
                },
                btn2: function(index, layero){
                    //$("#form1").submit();
                },
                cancel : function() {
                    layer.open({
                        type: 1
                        ,title: false //不显示标题栏
                        ,closeBtn: false
                        ,area: '300px;'
                        ,shade: 0.8
                        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                        ,btn: ['是的关闭它', '我再考虑一下']
                        ,yes:function(){
                            layer.closeAll();
                        }
                        ,btnAlign: 'c'
                        ,moveType: 1 //拖拽模式，0或者1
                        ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;text-align:center;font-size:20px;">确定关闭吗~!</div>'

                    });
                    return false;
                },
                end:function(){
                    $("#form2").hide();
                    location.reload();
                }
            });
        }
        //重新渲染表单
        function renderForm(){
            layui.use('form', function(){
                var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
                form.render('select');
            });
        }
        function renderDate() {
            layui.use('laydate', function(){
                var laydate = layui.laydate;
                //执行一个laydate实例
                laydate.render({
                    elem: '#deadtime' //指定元素
                });
            });
        }
        //弹出层
        function showadd(){
            //异步查询出数据,当ajax请求的网址响应返回后，会自动回调匿名函数
           //负责显示窗口
            renderForm();
            renderDate();
            var	layer = layui.layer;
            var othis = $(this);
            var type = othis.data('type')
            var text = othis.text();
            layer.open({
                type: 1
                ,skin:'layui-layer-molv'
                ,offset:type
                ,id: 'layerDemo'+type //防止重复弹出
                ,content: $("#form")
                ,btnAlign: 'c' //按钮居中
                ,shade: 0.5 //不显示遮罩
                ,title:"添加ip"
                ,area:['450px','430px']
                ,yes: function(index, layero){
                    layer.close(index);
                },
                btn2: function(index, layero){
                    //$("#form1").submit();
                },
                cancel : function() {
                    layer.open({
                        type: 1
                        ,title: false //不显示标题栏
                        ,closeBtn: false
                        ,area: '300px;'
                        ,shade: 0.8
                        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                        ,btn: ['是的关闭它', '我再考虑一下']
                        ,yes:function(){
                            layer.closeAll();
                        }
                        ,btnAlign: 'c'
                        ,moveType: 1 //拖拽模式，0或者1
                        ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;text-align:center;font-size:20px;">确定关闭吗~!</div>'

                    });
                    return false;
                },
                end:function(){
                    $("#form").hide();
                    location.reload();
                }
            });
        }
        /*//检查用户名
        function checkItemIp() {
            var username=$("#username").val();
            alert(username);
            if(username==""){
                document.getElementById("error").innerText="用户名不能为空!";
            }else {
                $.post("/checkip",{"username":username},function(data){
                    alert(data);
                    if(data=="0"){
                        document.getElementById("error").innerText="用户名可以使用!";
                    }else {
                        document.getElementById("error").innerText="用户名已被注册!";
                        $("#username").val('');
                        return false;
                    }
                })
            }
        }*/
    </script>


</head>


<body>

	<div class="place">
    <span>位置：</span>
    <ul class="placeul">
    <li><a href="#">首页</a></li>
    <li><a href="#">数据表</a></li>
    <li><a href="#">基本内容</a></li>
    </ul>
    </div>
    
    <div class="rightinfo">
    
    <div class="tools">
    
    	<ul class="toolbar">
        <li onclick="showadd()"><span><img src="images/t01.png" /></span>添加</li>
        <li onclick="delAll()"><span><img src="images/t03.png"/></span>删除</li>
        </ul>
        <ul class="toolbar1">
        <li><span><img src="images/t05.png" /></span>设置</li>
        </ul>
    </div>
    
    
    <table class="tablelist">
    	<thead>
    	<tr>
        <th><input name="" id="all" type="checkbox" value=""/></th>
        <th>ip标识</th>
        <th>ip地址</th>
        <th>ip限制</th>
        <th>创建时间</th>
        <th>失效时间</th>
        <th>原因</th>
        <th>操作</th>
        </tr>
        </thead>
        <tbody id="list">
        <c:forEach items="${pageInfo.list}" var="temp">
            <tr id="tr${temp.id}">
                <td ><input name="ipInfo" type="checkbox" value="${temp.id}"/></td>
                <td>${temp.id}</td>
                <td>${temp.ip}</td>
                <c:choose>
                    <c:when test="${temp.status==0}">
                        <td>启用状态</td>
                    </c:when>
                    <c:when test="${temp.status==1}">
                        <td>限制登陆状态</td>
                    </c:when>
                    <c:when test="${temp.status==2}">
                        <td>限制注册状态</td>
                    </c:when>
                </c:choose>
                <td>${temp.createtime}</td>
                <td>${temp.deadtime}</td>
                <td>${temp.remarks}</td>
                <td><a href="#" onclick="showedit(${temp.id})" class="tablelink">查看</a>     <a href="#" onclick="delOne(this,${temp.id})" class="tablelink"> 删除</a></td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
    
   
    <div class="pagin">
    	<div class="message">共<i class="blue">${pageInfo.total}</i>条记录，当前显示第&nbsp;<i class="blue">${pageInfo.pageNum}&nbsp;</i>页</div>
        <div style="width:500px;margin:0 auto ;position:relative">
        <ul class="paginList">
            <li class="paginItem"><a href="/ipmsg?">首页</a></li>
            <c:choose>
                <c:when test="${pageInfo.hasPreviousPage}">
                <li class="paginItem"><a href="/ipmsg?pageNum=${pageInfo.prePage}">上一页</a></li>
                </c:when>
                <c:otherwise>
                    <li class="paginItem"><a>上一页</a></li>
                </c:otherwise>
            </c:choose>
            <c:choose>
                <c:when test="${pageInfo.pageNum==2}">
                    <li class="paginItem"><a href="/ipmsg?pageNum=${pageInfo.pageNum-1}">${pageInfo.pageNum-1}</a></li>
                </c:when>
                <c:when test="${pageInfo.pageNum>2}">
                    <li class="paginItem"><a href="/ipmsg?pageNum=${pageInfo.pageNum-2}">${pageInfo.pageNum-2}</a></li>
                    <li class="paginItem"><a href="/ipmsg?pageNum=${pageInfo.pageNum-1}">${pageInfo.pageNum-1}</a></li>
                </c:when>
            </c:choose>
            <li class="paginItem" style="background-color: #056dae;"><a href="/ipmsg?pageNum=${pageInfo.pageNum}" style="color: white">${pageInfo.pageNum}</a></li>
            <c:choose>
                <c:when test="${pageInfo.pages-pageInfo.pageNum==1}">
                    <li class="paginItem"><a href="/ipmsg?pageNum=${pageInfo.pageNum+1}">${pageInfo.pageNum+1}</a></li>
                </c:when>
                <c:when test="${pageInfo.pages-pageInfo.pageNum>=2}">
                    <li class="paginItem"><a href="/ipmsg?pageNum=${pageInfo.pageNum+1}">${pageInfo.pageNum+1}</a></li>
                    <li class="paginItem"><a href="/ipmsg?pageNum=${pageInfo.pageNum+2}">${pageInfo.pageNum+2}</a></li>
                </c:when>
            </c:choose>
            <c:choose>
                <c:when test="${pageInfo.hasNextPage}">
            <li class="paginItem"> <a href="/ipmsg?pageNum=${pageInfo.nextPage}">下一页</a></li>
                </c:when>
                <c:otherwise>
                    <li class="paginItem"><a>下一页</a></li>
                </c:otherwise>
            </c:choose>
            <li class="paginItem"><a href="/ipmsg?pageNum=${pageInfo.pages}">尾页</a></li>
        </ul>
        </div>
    </div>



    <div id="form" style="padding:20px 20px;display: none;">
        <form class="layui-form" id="form1" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">ip地址</label>
                <div class="layui-input-inline">
                    <input type="text" name="ip" value="" id="ip" required  lay-verify="required" placeholder="ip地址" autocomplete="off" class="layui-input" style="width: 190px" onblur="checkItemIp()">
                </div>
                <div class="layui-form-mid layui-word-aux"  id="error"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">ip限制</label>
                <div class="layui-input-block" style="width: 190px">
                    <select name="status" id="select1" required lay-verify="required">
                        <option value="0">启用状态</option>
                        <option value="1">限制登陆状态</option>
                        <option value="2">限制注册状态</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">失效时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="deadtime" value="yyyy/mm/dd" id="deadtime" required  lay-verify="required" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux"  id="error3"></div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">请填写描述</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" name="remarks" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" style="background-color:#4098CA" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
        <div id="form2" style="padding:20px 20px;display: none;">
            <form class="layui-form" id="form3" method="post">
                <div class="layui-form-item">
                    <label class="layui-form-label">ip地址</label>
                    <div class="layui-input-inline">
                        <input type="text" name="ip" value="168.196.150.111" id="ip1" required  lay-verify="required" placeholder="ip地址" autocomplete="off" class="layui-input" style="width: 190px" onblur="checkItemIp()">
                    </div>
                    <div class="layui-form-mid layui-word-aux"  id="error1"></div>
                </div>
                <input type="hidden" name="id" value="" id="ipid">
                <div class="layui-form-item">
                    <label class="layui-form-label">ip限制</label>
                    <div class="layui-input-block" style="width: 190px">
                        <select name="status" id="select2" required lay-verify="required">
                            <option value="0">启用状态</option>
                            <option value="1">限制登陆状态</option>
                            <option value="2">限制注册状态</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">失效时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="deadtime" value="yyyy/mm/dd" id="deadtime1" required  lay-verify="required" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux"  id="error4"></div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">请填写描述</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" name="remarks" id="remarks1" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" style="background-color:#4098CA" lay-submit lay-filter="formDemo1">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script type="text/javascript">
        //Demo
        layui.use('form', function(){
            var form = layui.form;
            var $= layui.jquery;
            //监听提交
            form.on('submit(formDemo)', function(data){
                var v=$("#select1").val();
                var param=data.field;//定义临时变量获取表单提交过来的数据，非json格式
               layer.msg(JSON.stringify(param));//测试是否获取到表单数据，调试模式下在页面控制台查看
                $.ajax({
                    url:"/addip?v="+v,
                    type:'post',//method请求方式，get或者post
                    dataType:'json',//预期服务器返回的数据类型
                    data:JSON.stringify(param),//表格数据序列化
                    contentType: "application/json; charset=utf-8",
                    success:function(data){
                        var msg="添加成功！"
                        var msg2="添加失败！"
                        if (data == "0") {
                            layer.close(layer.index);
                            location.reload();
                            layer.msg(msg,{
                                icon:1,
                                time:1000
                            },function(){

                            });

                        } else{
                            layer.msg(msg2,{
                                icon:2,
                                time:1000
                            },function(){});
                        }
                    }
                });
            });

            return false;
        });
        //Demo
        layui.use('form', function(){
            var form = layui.form;
            var $= layui.jquery;
        form.on('submit(formDemo1)', function(data){
            var v=$("#select2").val();
            var param=data.field;//定义临时变量获取表单提交过来的数据，非json格式
            layer.msg(JSON.stringify(param));//测试是否获取到表单数据，调试模式下在页面控制台查看
            $.ajax({
                url:"/editip?v="+v,
                type:'post',//method请求方式，get或者post
                dataType:'json',//预期服务器返回的数据类型
                data:JSON.stringify(param),//表格数据序列化
                contentType: "application/json; charset=utf-8",
                success:function(data){
                    var msg="添加成功！"
                    var msg2="添加失败！"
                    if (data == "0") {
                        layer.close(layer.index);

                        layer.msg(msg,{
                            icon:1,
                            time:1000
                        },function(){
                            location.reload();
                        });
                    } else{
                        layer.msg(msg2,{
                            icon:2,
                            time:1000
                        },function(){});
                    }
                }
            });
        });
        return false;
        });
        $('.tablelist tbody tr:odd').addClass('odd');
	</script>

</body>

</html>
